<!--
 * @Description: 
 * @Author: xuqi
 * @Github: https://github.com/knight-peter
 * @LastEditors: xuqi
 -->
<template>
  <div class="m-page">
    <van-nav-bar
      class="m-page__bar"
      title="会员资料"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-cell-group>
      <van-field v-model="realname" label="姓名" placeHolder="请输入姓名" />
      <van-field
        v-model="mobile"
        label="手机"
        placeHolder="请输入手机"
        disabled
      />
      <van-field
        :value="receiver_area_name"
        @input="update_receiver_area_name"
        label="收货地区"
        placeHolder="选择省 / 市 / 区"
        @click="selectArea"
        readonly
        required
      />
      <van-field
        v-model="receiver_address"
        label="详细地址"
        placeHolder="请输入您的常用收货地址"
        required
      />
      <van-field
        v-model="id_card"
        label="身份证号"
        placeHolder="请输入身份证号"
      />
      <van-field
        v-model="bankcard"
        label="银行卡号"
        placeHolder="请输入银行卡号"
      />
      <van-field v-model="bank" label="银行名" placeHolder="请输入银行名" />
      <van-field
        v-model="parent_number"
        label="上级编号"
        disabled
        placeHolder="请输入上级编号"
      />
    </van-cell-group>
    <div class="g-p--10">
      <van-button type="danger" @click="updateUserInfo" size="large"
        >确认提交</van-button
      >
    </div>
    <!-- 选择地区 start -->
    <van-popup v-model="show_area" position="bottom">
      <van-area
        ref="area"
        :area-list="areaList"
        :value="receiver_area_code"
        @confirm="confirmArea"
        @cancel="cancelArea"
      />
    </van-popup>
    <!-- 选择地区 end -->
  </div>
</template>

<script>
import {
  NavBar,
  // Cell,
  CellGroup,
  // Panel,
  Field,
  // Icon,
  Button,
  // Tab,
  // Tabs,
  Popup,
  Area
} from "vant";
import { mapState } from "vuex";
import { userModel } from "@/api";
import areaList from "@/lib/area";
import Util from "@/lib/util";

const util = new Util();

export default {
  name: "user_info",
  components: {
    "van-nav-bar": NavBar,
    // "van-cell": Cell,
    "van-cell-group": CellGroup,
    // "van-panel": Panel,
    "van-field": Field,
    // "van-icon": Icon,
    "van-button": Button,
    // "van-tab": Tab,
    // "van-tabs": Tabs,
    "van-area": Area,
    "van-popup": Popup
  },
  data() {
    return {
      areaList,
      show_area: false
    };
  },
  computed: {
    parent_number: {
      get() {
        return (
          (this.$store.state.userInfo &&
            this.$store.state.userInfo.parent_number) ||
          "暂无上级编号"
        );
      },
      set(value) {
        this.$store.commit("updateUserInfo", { parent_number: value });
      }
    },
    bank: {
      get() {
        return (
          (this.$store.state.userInfo && this.$store.state.userInfo.bank) || ""
        );
      },
      set(value) {
        this.$store.commit("updateUserInfo", { bank: value });
      }
    },
    bankcard: {
      get() {
        return (
          (this.$store.state.userInfo && this.$store.state.userInfo.bankcard) ||
          ""
        );
      },
      set(value) {
        this.$store.commit("updateUserInfo", { bankcard: value });
      }
    },
    id_card: {
      get() {
        return (
          (this.$store.state.userInfo && this.$store.state.userInfo.id_card) ||
          ""
        );
      },
      set(value) {
        this.$store.commit("updateUserInfo", { id_card: value });
      }
    },
    mobile: {
      get() {
        return (
          (this.$store.state.userInfo && this.$store.state.userInfo.mobile) ||
          ""
        );
      },
      set(value) {
        this.$store.commit("updateUserInfo", { mobile: value });
      }
    },
    realname: {
      get() {
        return (
          (this.$store.state.userInfo && this.$store.state.userInfo.realname) ||
          ""
        );
      },
      set(value) {
        this.$store.commit("updateUserInfo", { realname: value });
      }
    },
    receiver_address: {
      get() {
        return (
          (this.$store.state.userInfo &&
            this.$store.state.userInfo.receiver_address) ||
          ""
        );
      },
      set(value) {
        this.$store.commit("updateUserInfo", { receiver_address: value });
      }
    },
    /* receiver_area_name: {
      get() {
        return (
          (this.$store.state.userInfo &&
            this.$store.state.userInfo.receiver_area_name) ||
          ""
        );
      },
      set(value) {
        this.$store.commit("updateUserInfo", { receiver_area_name: value });
      }
    }, */
    ...mapState({
      receiver_area_name: state => state.userInfo.receiver_area_name || ""
    }),
    receiver_area_code: {
      get() {
        return (
          (this.$store.state.userInfo &&
            this.$store.state.userInfo.receiver_area_code) ||
          ""
        );
      },
      set(value) {
        this.$store.commit("updateUserInfo", { receiver_area_code: value });
      }
    }
  },
  methods: {
    update_receiver_area_name({ province, city, area }) {
      console.log(`${province.name}/${city.name}/${area.name}`);
      this.$store.commit("updateUserInfo", {
        receiver_area_name: `${province.name}/${city.name}/${area.name}`
      });
    },
    selectArea() {
      this.show_area = true;
    },
    /* 地区选择成功 */
    confirmArea(res) {
      this.show_area = false;
      const province = res[0];
      const city = res[1];
      const area = res[2];
      // this.receiver_area = province.name + city.name + area.name;
      // this.receiver_area_name = `${province.name}/${city.name}/${area.name}`;
      this.update_receiver_area_name({
        province,
        city,
        area
      });
      // this.receiver_area_code = area.code;
      this.$store.commit("updateUserInfo", { receiver_area_code: area.code });
    },
    /* 地区选择取消 */
    cancelArea() {
      this.show_area = false;
      this.$refs.area.reset();
    },
    updateUserInfo() {
      userModel._updateUserInfo(this.$store.state.userInfo).then(res => {
        util._done({ res, to: "/user_center" }).then(() => {
          this.$store.dispatch("getUserInfo");
        });
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped></style>
